<template>
  <dialog ref="el" class="modal" @close="modelValue = false">
    <div ref="content" :class="cn('modal-box max-w-[80%]', boxClass)">
      <form method="dialog">
        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
          ✕
        </button>
      </form>
      <slot />
    </div>
  </dialog>
</template>
<script setup lang="ts">
import { ref, watch, useTemplateRef } from "vue";
import { onClickOutside } from "@vueuse/core";
import { cn } from "@/components/utils";

const el = ref<HTMLDialogElement>();
interface Props {
  boxClass?: string;
}
defineProps<Props>();
const modelValue = defineModel<boolean>();

const content = useTemplateRef<HTMLElement>("content");
onClickOutside(content, () => (modelValue.value = false));

watch(modelValue, (val) => {
  if (val) el.value?.showModal();
  else el.value?.close();
});
</script>
